<form method="post" action="<?php echo U('Admin/Logistics/DistributionArea/save');?>">
    <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
        <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">
        </div>
        <div class="col-lg-10 col-md-9 col-xs-7 filed-from padding-none rule-lists">
            <?php echo $data?>
        </div>
    </div>
    <style>

        .area-nav{
            width: 160px;
            position: fixed;
            height:auto;
            background: #fff;
            max-height: 400px;
            overflow: auto;
            bottom:0;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
        .area-nav ul {
            width: 100%;
            height:auto;
            padding: 0;
            margin: 0;

        }
        .area-nav ul li{

            width: 100%;
            height: 35px;
            border: 1px solid #ddd;
            border-top: none;

        }
        .area-nav ul li:last-child{
            border-bottom: none;
        }
        .area-nav ul li a{
            width: 100%;
            height: 100%;
            display: block;
            line-height: 35px;
            font-size: 14px;
            text-indent: 1em;
            text-align: left;
            color: #333;
            text-decoration: none;
        }
        .area-nav ul li a:hover{

            background: #efefef;

        }
    </style>

    <input type="hidden" value="<?php echo $store_id?>" name="store_id" class="_data">
    <input type="submit" style="width:150px; position: fixed;bottom:10px;right:50px" class="btn btn-success radius-none" value="保存" name="dosubmit">
    <div class="area-nav">
        <ul>
            <?php foreach($other as $v):?>
            <li><a href="javascript:;" data-id="id_<?php echo $v['id']?>"><?php echo $v['name']?></a></li>
            <?php endforeach;?>
        </ul>
    </div>
</form>
<script src="/statics/common/plugins/jquery.color.js"></script>
<script>
    $(function(){

        //提交数据
        $('form').submit(function(){

            var _this = $(this);

            var data = {};

            data.store_id = $('[name="store_id"]').val();

            //解决数据量太大  post请求限制
            var areas = [];

            //data.areas = [];
            //console.log($('input[type="checkbox"]:checked','.rules'));
            $('input[type="checkbox"]:checked','.rules').each(function(i,v){

                areas.push($(this).val());

            });

            if(areas.length < 1){

                layer.msg('至少选择一个',{shift:6});

                return false;

            }



            var sendNums = 500;//每次发送数据条数
            var nums = Math.ceil( (areas.length) / sendNums);//请求次数


            layer.load();
            sends(nums,areas,1);


            function sends(nums,areas,level){


                var src = _this.attr('action');

                //只有一次请求
                if(nums == 1){

                    data.areas = areas;

                    $.post(src,{'data':data,'send':'only'},function(result){

                        layer.closeAll();
                        showMessage(result.msg,result.code,'','',2000);

                    });
                    //切割数据分批请求
                }else if(nums >= level){

                    var area = [];

                    for(var i = (sendNums * (level - 1)); i < sendNums * level; i++ ){

                        area.push(areas[i]);

                    }

                    //data.areas = area;

                    $.post(src,{'data':{'areas':area},'send':level},function(result){

                        if(result.code == 100){

                            if((level+1) > nums){

                                $.post(src,{'send':'end','nums':nums,'store_id':data.store_id},function(result){

                                    layer.closeAll();
                                    showMessage(result.msg,result.code,'','',2000);

                                });

                            }else{

                                sends(nums,areas,level+1);

                            }


                        }

                    });

                }

            }


            return false;
        })
        //选择区域
        $('.area-nav a').click(function(){

            var id = $(this).data('id');


            main_content_top = $('#main-content')[0].offsetTop;


            rule_list_top = $('.rule-lists')[0].offsetTop;

            st_offset_top = $('#'+id)[0].offsetTop;

            $('.main-body').animate({

                'scrollTop' : (st_offset_top + main_content_top + rule_list_top + 10),

            },400,function(){

                $('#'+id+' > label').animate({

                    backgroundColor : '#Fc3a2e',

                },300,function(){

                    $('#'+id + '> label').animate({

                        backgroundColor : '#efefef',

                    },300)

                });

                $('#'+id).animate({

                    borderColor : '#Fc3a2e',

                },300,function(){

                    $('#'+id).animate({

                        borderColor : '#efefef',

                    },300)

                });

            });


        })

        //授权规则全选反选
        $('input[type="checkbox"]','.rules').click(function(){
            var _this = $(this);

            var id = _this.attr('id');

            var pid = _this.attr('pid');

            var isChecked = _this.is(':checked');

            //_child(id,isChecked);
            //_parent(pid,_this);
            _child(id,isChecked);
            _parent(pid,_this);
        });

    });

    function _child(id,isChecked){

        //获取所有当前节点子节点
        var _childNote = $('input[pid="'+id+'"]');


        if(_childNote.length > 0){

            //如果有子节点,改变节点状态
            _childNote.each(function(){

                this.checked = isChecked;

                var id = $(this).attr('id');

                //递归检测
                _child(id,isChecked);

            });

        }else{
            return false
        }
    }

    function _parent(pid,_this){


        var _parentNote = $('input[id="'+pid+'"]');

        if(_parentNote.length < 1)return false;
        //判断当前节点所有兄弟节点是否有选中

        var $brothers = _this
                .parent()
                .parent()
                .children('label')
                .children();

        //
        var isAllChecked = false;

        var _parentNote = $('input[id="'+pid+'"]');

        var _ppid = _parentNote.attr('pid');

        //检测当前节点的兄弟节点是否有选中, 只要有一个是选中的  父级就为选中状态
        $brothers.each(function(){

            if(this.checked){

                isAllChecked = true;

            }

        });

        //设置父级状态
        if(isAllChecked){

            _parentNote[0].checked = true;

        }else{

            _parentNote[0].checked = false;

        }

        //递归检测
        _parent(_ppid,_parentNote);

    }

    //数据提交回调
    function ajaxRequestCallback(result,id,_this){

        if(result.code == 200){

            layer.msg(result.msg);

        }else{

            layer.msg(result.msg,function(){});

        }

    }
